import React from 'react'//订单
import './order.less'
import cookies from 'js-cookie'
import { Tabs } from 'antd';
import OrAll from './orall';
import OrAwaitMoney from './orawaitmoney';
import AlreadyCancel from './alreadycancel';
import AlreadyGood from './alreadygood';
import { useState,useEffect } from 'react';
import { Route,Switch } from 'react-router';
import {useSelector,useDispatch} from 'react-redux'
import axios from 'axios'
import action from '../../store/action/index'

const { TabPane } = Tabs;
const onDer=(key,props)=> {//顶部点击事件
  console.log(props);
    props.props.history.push(key)
    props.setCCount(key)
    props.changeDefaults(key)
}
const Demo = (props) => (
    <Tabs activeKey={props.defaultwws} defaultActiveKey={"/order/orall"} tabBarGutter={50} centered onChange={(e)=>{onDer(e,props)}}>
      <TabPane tab="全部订单" key="/order/orall">
          <Switch>
              <Route path="/order/orall">
                {props.data.length?<OrAll shopp={props.shopp}  props={props} data={props.data}></OrAll>:null}
              </Route>
          </Switch>
      </TabPane>
      <TabPane tab="待付款" key="/order/orawaitmoney">
            <Switch>
              <Route path="/order/orawaitmoney">
              {props.data.length? <OrAwaitMoney shopp={props.shopp} props={props} data={props.data} changeDefaults={props.changeDefaults} ></OrAwaitMoney>:null}
                 
              </Route>
            </Switch>
      </TabPane>
      <TabPane tab="已付款" key="/order/alreadygood">
            <Switch>
              <Route path="/order/alreadygood">
              {props.data.length?<AlreadyGood shopp={props.shopp} props={props} data={props.data} ></AlreadyGood>:null}
                
              </Route>
            </Switch>
      </TabPane>
      <TabPane tab="已取消" key="/order/alreadycancel">
            <Switch>
              <Route path="/order/alreadycancel" >
              {props.data.length?<AlreadyCancel shopp={props.shopp} props={props} data={props.data} ></AlreadyCancel>:null}
                
              </Route>
            </Switch>
      </TabPane>
    </Tabs>
);
  
const Order =(props)=>{
 
      let [count,setCount]=useState(0)//已付款 未付款等
      let [data,setData]=useState([])//数据
      let [deng,setDeng]=useState(false)//是否显示订单
    let [defaultww,changeDefault]=useState(props.location.pathname)
    let hen1=useSelector(state=>state.Login)//获取redux的数据
    const dispatch=useDispatch()
    const setCCount=async (key)=>{
      switch (key) {
        case '/order/orall':
          count=0
          setCount(count)
          break;
        case '/order/orawaitmoney':
          count=1
          setCount(count)
          break;
        case '/order/alreadygood':
          count=2
          setCount(count)
          break;
        case '/order/alreadycancel':
          count=3
          setCount(count)
          break;
      
        default:
          break;
      }
      
      if(!cookies.get('usertoken')){
        deng=false
        setDeng(deng)
    }else{
        deng=true
        setDeng(deng)
        await axios({method:'post',url:'/api/front_end/orderList',data:{user_id:cookies.get("user_id"),num:count}}).then((res)=>{
          console.log(res);
          data=res.data.data
          setData(data)
        })
        console.log(data);
    }
    }
     //点击付款 再次购买 
    const shopp = (num,id) => {
        console.log(num,id);
        console.log('7');
        switch (num) {
            case '1':
                props.history.push('/product')
                localStorage.setItem('carIdData',JSON.stringify([id]))
                break;
            case '2':
                // type = "再次购买"
                props.history.push('/list')
                break;
            case '3':
                // type = "加入购物车"
                console.log('加入购物车');
                break;

            default:
                break;
        }
    }
    useEffect(async ()=>{
      console.log(hen1.message);
      console.log(count);
      // /orderList /api/front_end/接口名
      // 参数:
      //   user_id  用户id
      //   num    下标
      if(!cookies.get('usertoken')){
        deng=false
        setDeng(deng)
    }else{
        deng=true
        setDeng(deng)
        await axios({method:'post',url:'/api/front_end/orderList',data:{user_id:cookies.get("user_id"),num:count}}).then((res)=>{
          data=res.data.data
          setData(data)
          
        })
        console.log(data)
        // dispatch(action.orderAction.setNav(data))
    } 
    },[])

    useEffect(() => {
      if(!cookies.get('usertoken')){
          deng=false
          setDeng(deng)
      }else{
          deng=true
          setDeng(deng)
      }
  })
    return (
        <div className={"order_body"}>
            <div className="order_title">
                <h1>我的订单</h1>
            </div>
            <div className="order_center">
                <Demo props={{...props}} data={data} shopp={shopp} deng={deng} defaultwws={defaultww} setCCount={setCCount} changeDefaults={changeDefault}></Demo>
            </div>
        </div>
    )
}
export default Order
